<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue网络请求</title>
  <style>
    .gray{
      background-color: #ccc
    }
  </style>
  <script src="js/vue.min.js"></script>
  <script src="js/vue-resourceY.js"></script>
  <script>
    window.onload = function(){
      new Vue({
        el: "#box",
        data: {
          myData:[],
          msg:'',
          now: -1
        },
        methods: {
          get:function(){
            this.$http.get('./get.php',{
              a:1,
              b:2,
            }).then(function(res){
              alert(res.data)
            },function(){
              alert("失败")
            })
          },
          jsonp:function(){
            // https://sug.so.360.cn/suggest?callback=suggest_so&word=a
            this.$http.jsonp('https://sug.so.360.cn/suggest',{
              'word':this.msg
            },{
              //emulateJSON:true
            }).then(function(res){
              // alert(res.data.s)
              this.myData = res.data.s
              // this.msg = res.data.s[0]
            },function(){
              alert(res.status)
            })
          },
          changeDown:function(){
            this.now++
            if(this.now==this.myData.length){
              this.now = -1
            }
          },
          changeUp: function(){
            this.now--
            if(this.now==-2){
              this.now=this.myData.length-1
            }
          }

        }
      })
    }
  </script>
</head>

<body>
  <h2>网络请求</h2>
  <div id="box">
    <input type="button" value="按钮" @click="jsonp()" >
    <br>
    <input type="text" name="" value="" v-model='msg' @keyup="jsonp()"
     @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
    <ul v-show="myData.length!=0">
      <li v-for='item in myData' :class="{gray:$index==now}">{{item}}</li>
    </ul>
    <p v-show="myData.length==0">暂无数据</p>
  </div>
</body>
</html>
